<!DOCTYPE html>
<html lang="zh">
<head>
    <:include file="../common/css.html" title="工作台"/>
    <link rel="stylesheet" href="/assets/css/other/console2.css"/>
</head>
<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            快捷菜单
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                    <div class="pear-card" data-id="index" data-title="主页" data-url="/dashboard">
                                        <i class="layui-icon layui-icon-home"></i>
                                    </div>
                                    <span class="pear-card-title">主页</span>
                                </div>
                                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                    <div class="pear-card" data-id="user" data-title="用户管理" data-url="/system/user/index">
                                        <i class="layui-icon layui-icon-camera"></i>
                                    </div>
                                    <span class="pear-card-title">用户管理</span>
                                </div>
                                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                    <div class="pear-card" data-id="role" data-title="角色管理" data-url="/system/role/index">
                                        <i class="layui-icon layui-icon-star"></i>
                                    </div>
                                    <span class="pear-card-title">角色管理</span>
                                </div>
                                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                    <div class="pear-card" data-id="menu" data-title="菜单管理" data-url="/system/menu/index">
                                        <i class="layui-icon layui-icon-camera"></i>
                                    </div>
                                    <span class="pear-card-title">菜单管理</span>
                                </div>
                                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                    <div class="pear-card" data-id="loginLog" data-title="登录日志"
                                         data-url="/system/loginLog/index">
                                        <i class="layui-icon layui-icon-console"></i>
                                    </div>
                                    <span class="pear-card-title">登录日志</span>
                                </div>
                                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                    <div class="pear-card" data-id="optLog" data-title="操作日志"
                                         data-url="/system/optLog/index">
                                        <i class="layui-icon layui-icon-auz"></i>
                                    </div>
                                    <span class="pear-card-title">操作日志</span>
                                </div>
                                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                    <div class="pear-card" data-id="home6" data-title="文件管理" data-url="/system/file/index">
                                        <i class="layui-icon layui-icon-cart"></i>
                                    </div>
                                    <span class="pear-card-title">文件管理</span>
                                </div>
                                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                    <div class="pear-card" data-id="swagger" data-title="更多" data-url="/doc.html">
                                        <i class="layui-icon layui-icon-app"></i>
                                    </div>
                                    <span class="pear-card-title">更多</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            代办任务
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                    <div class="pear-card2">
                                        <div class="title">待审评论</div>
                                        <div class="count pear-text">21</div>
                                    </div>
                                </div>
                                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                    <div class="pear-card2">
                                        <div class="title">待审帖子</div>
                                        <div class="count pear-text">32</div>
                                    </div>
                                </div>
                                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                    <div class="pear-card2">
                                        <div class="title">待审文章</div>
                                        <div class="count pear-text">14</div>
                                    </div>
                                </div>
                                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                    <div class="pear-card2">
                                        <div class="title">待审用户</div>
                                        <div class="count pear-text">63</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                <div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">
                            使用记录
                        </div>
                        <div class="layui-card-body">
                            <table id="role-table" lay-filter="role-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">留言板</div>
                <div class="layui-card-body">
                    <ul class="pear-card-status">
                        <li>
                            <p>要不要作为我的家人，搬来我家。</p>
                            <span>12月25日 19:92</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                        <li>
                            <p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
                            <span>4月30日 22:43</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                        <li>
                            <p>夏天真的来了，尽管它还有些犹豫。</p>
                            <span>4月30日 22:43</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                        <li>
                            <p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
                            <span>4月30日 22:43</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                        <li>
                            <p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
                            <span>4月30日 22:43</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                        <li>
                            <p>那是一种内在的东西，他们到达不了，也无法触及！</p>
                            <span>5月12日 01:25</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                        </li>
                        <li>
                            <p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
                            <span>6月11日 15:33</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                        <li>
                            <p>一切都在不可避免的走向庸俗。</p>
                            <span>2月09日 13:40</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                        <li>
                            <p>路上没有灯火的时候，就点亮自己的头颅。</p>
                            <span>3月11日 12:30</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>

                        <li>
                            <p>我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂</p>
                            <span>4月30日 22:43</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                        </li>
                        <li>
                            <p>接近，是我对一切的态度，是我对一切态度的距离</p>
                            <span>6月11日 15:33</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                        <li>
                            <p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
                            <span>2月09日 13:40</span>
                            <a href="javascript:;" data-id="1"
                               class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <:include file="../common/js.html"/>
    <script>
        layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                element = layui.element,
                echarts = layui.echarts,
                table = layui.table,
                carousel = layui.carousel;

            let cols = [
                [{
                    type: 'checkbox'
                },
                    {
                        title: '角色名',
                        field: 'roleName',
                        align: 'center',
                        width: 100
                    },
                    {
                        title: 'Key值',
                        field: 'roleCode',
                        align: 'center'
                    },
                    {
                        title: '描述',
                        field: 'details',
                        align: 'center'
                    },
                    {
                        title: '是否可用',
                        field: 'enable',
                        align: 'center',
                        templet: '#role-enable'
                    }
                ]
            ]

            table.render({
                elem: '#role-table',
                url: '/assets/data/role.json',
                page: true,
                cols: cols,
                skin: 'line'
            });


            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

            $("body").on("click", "[data-url]", function () {
                parent.layui.tab.addTabOnlyByElem("content", {
                    id: $(this).attr("data-id"),
                    title: $(this).attr("data-title"),
                    url: $(this).attr("data-url"),
                    close: true
                })
            })


            let bgColor = "#fff";
            let color = [
                "#0090FF",
                "#36CE9E",
                "#FFC005",
                "#FF515A",
                "#8B5CFF",
                "#00CA69"
            ];
            let echartData = [{
                name: "1",
                value1: 100,
                value2: 233
            },
                {
                    name: "2",
                    value1: 138,
                    value2: 233
                },
                {
                    name: "3",
                    value1: 350,
                    value2: 200
                },
                {
                    name: "4",
                    value1: 173,
                    value2: 180
                },
                {
                    name: "5",
                    value1: 180,
                    value2: 199
                },
                {
                    name: "6",
                    value1: 150,
                    value2: 233
                },
                {
                    name: "7",
                    value1: 180,
                    value2: 210
                },
                {
                    name: "8",
                    value1: 230,
                    value2: 180
                }
            ];

            let xAxisData = echartData.map(v => v.name);
            // ["1", "2", "3", "4", "5", "6", "7", "8"]
            let yAxisData1 = echartData.map(v => v.value1);
            // [100, 138, 350, 173, 180, 150, 180, 230]
            let yAxisData2 = echartData.map(v => v.value2);
            // [233, 233, 200, 180, 199, 233, 210, 180]
            const hexToRgba = (hex, opacity) => {
                let rgbaColor = "";
                let reg = /^#[\da-f]{6}$/i;
                if (reg.test(hex)) {
                    rgbaColor ="rgba("+parseInt("0x" + hex.slice(1, 3)) + "," +
                        parseInt("0x" + hex.slice(3, 5)) + "," +
                        parseInt("0x" + hex.slice(5, 7)) + "," +
                        opacity + ")";
                }
                return rgbaColor;
            }

            option = {
                backgroundColor: bgColor,
                color: color,
                legend: {
                    right: 10,
                    top: 10
                },
                tooltip: {
                    trigger: "axis",
                    formatter: function (params) {
                        let html = '';
                        params.forEach(v => {
                            html +=
                                '<div style="color: #666;font-size: 14px;line-height: 24px">'+
                            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+color[v.componentIndex]+';"></span>'+
                             v.seriesName + '.' + v.name +
                            '<span style="color:'+ color[v.componentIndex]+';font-weight:700;font-size: 18px">'+v.value+'</span>' +
                            '万元';
                        })
                        return html
                    },
                    extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: '#ffffff',
                            shadowColor: 'rgba(225,225,225,1)',
                            shadowBlur: 5
                        }
                    }
                },
                grid: {
                    top: 100,
                    containLabel: true
                },
                xAxis: [{
                    type: "category",
                    boundaryGap: false,
                    axisLabel: {
                        formatter: '{value}月',
                        textStyle: {
                            color: "#333"
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#D9D9D9"
                        }
                    },
                    data: xAxisData
                }],
                yAxis: [{
                    type: "value",
                    name: '单位：万千瓦时',
                    axisLabel: {
                        textStyle: {
                            color: "#666"
                        }
                    },
                    nameTextStyle: {
                        color: "#666",
                        fontSize: 12,
                        lineHeight: 40
                    },
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#E9E9E9"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                }],
                series: [{
                    name: "2018",
                    type: "line",
                    smooth: true,
                    // showSymbol: false,/
                    symbolSize: 8,
                    zlevel: 3,
                    lineStyle: {
                        normal: {
                            color: color[0],
                            shadowBlur: 3,
                            shadowColor: hexToRgba(color[0], 0.5),
                            shadowOffsetY: 8
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [{
                                    offset: 0,
                                    color: hexToRgba(color[0], 0.3)
                                },
                                    {
                                        offset: 1,
                                        color: hexToRgba(color[0], 0.1)
                                    }
                                ],
                                false
                            ),
                            shadowColor: hexToRgba(color[0], 0.1),
                            shadowBlur: 10
                        }
                    },
                    data: yAxisData1
                }, {
                    name: "2019",
                    type: "line",
                    smooth: true,
                    // showSymbol: false,
                    symbolSize: 8,
                    zlevel: 3,
                    lineStyle: {
                        normal: {
                            color: color[1],
                            shadowBlur: 3,
                            shadowColor: hexToRgba(color[1], 0.5),
                            shadowOffsetY: 8
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [{
                                    offset: 0,
                                    color: hexToRgba(color[1], 0.3)
                                },
                                    {
                                        offset: 1,
                                        color: hexToRgba(color[1], 0.1)
                                    }
                                ],
                                false
                            ),
                            shadowColor: hexToRgba(color[1], 0.1),
                            shadowBlur: 10
                        }
                    },
                    data: yAxisData2
                }]
            };

            echartsRecords.setOption(option);

            window.onresize = function () {
                echartsRecords.resize();
            }

        });
    </script>
</body>
</html>
